<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>字段管理</title>
    <link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all-neptune.css"/>
    <script type="text/javascript" src="../lib/ext/ext-all.js"></script>
    <script type="text/javascript" src="../lib/gf/common_grid.js"></script>
</head>
<script type="text/javascript">
    Ext.Loader.setConfig({enabled: true});

    Ext.Loader.setPath('Ext.ux', '/ext4/ux/');
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.toolbar.Paging',
        'Ext.ModelManager',
        'Ext.tip.QuickTipManager'
    ]);
    var win;
    Ext.onReady(function () {


        var form_id;
        var _urlparams = Ext.urlDecode(document.URL.split("?")[document.URL.split("?").length - 1]);
        if(_urlparams && _urlparams._id){
            form_id = _urlparams._id;
        }

        Ext.define( 'ModelList', {
            extend: 'Ext.data.Model',
            fields: [
                '_id','xtype','data_type','field_label','name','allow_blank','order','read_only'
            ],
            idProperty: '_id'
        });

        // create the Data Store
        var store = Ext.create('Ext.data.Store', {
            pageSize: 20,
            model: 'ModelList',
            remoteSort: true,
            proxy: {
                type: 'ajax',
                url: '/form/field/list?form_id='+form_id,
                reader: {
                    type: 'json',
                    root: 'data',
                    totalProperty: 'count'
                },
                simpleSortMode: true
            },
            sorters: [
                {
                    property: '_id',
                    direction: 'DESC'
                }
            ]
        });


        //关闭窗口
        function doClose(){
            parent.closeWin();
        }
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            loadMask: true,
            region: 'center',
            selModel: Ext.create('Ext.selection.CheckboxModel'),
            columns: [
                {text: "_id",dataIndex: '_id',hidden: true},
                {text: 'fieldLabel',dataIndex: 'field_label',width:180},
                {text: 'name',dataIndex: 'name',width:180},
                {text: 'xtype',dataIndex: 'xtype',width:100},
                {text: '数据类型',dataIndex: 'data_type',width:150},
                {text: 'allowBlank',dataIndex: 'allow_blank',width:100,
                    renderer: function(val){
                    return val == true ? "是" : "否";
                }},
                {text: 'readOnly',dataIndex: 'read_only',width:100,
                    renderer: function(val){
                        return val == true ? "是" : "否";
                    }},
                {text: 'order',dataIndex: 'order',width:50}
            ],
            // paging bar on the bottom
            bbar: Ext.create('Ext.PagingToolbar', {
                store: store,
                displayInfo: true,
                displayMsg: 'Displaying {0} - {1} of {2}',
                emptyMsg: "没有数据！！！"

            }),
            tbar: [
                {
                    pressed: true,
                    text: "修  改",
                    icon : '../img/edit.png',
                    handler: function(){doEdit(grid,"/admin/form/field_add.html?form_id="+form_id,"修改字段")}
                },
                {
                    pressed: true,
                    icon : '../img/add.png',
                    text: "添  加",
                    handler: function(){doAdd("/admin/form/field_add.html?form_id="+form_id,"添加字段")}
                },
                {
                    pressed: true,
                    icon : '../img/delete.png',
                    text: "删  除",
                    handler: function(){doDel(grid,"/form/field/del",store)}
                },
                {pressed: true,text: "关  闭",handler: doClose,icon : '../img/close.png'}
            ]
        });


        var viewport = new Ext.Viewport({
                    layout: 'border',
                    renderTo: "topic-grid",
                    items: [grid]}
        );


        // trigger the data store load
        store.loadPage(1);
        window.refresh = function(){
            store.loadPage(1);
        }

        window.closeWin = function(){
            win.hide();
        }
    });
</script>
<body>
<div id="topic-grid" style="height: 1024px;width:100%"></div>
<p>The js is not minified so it is readable. See <a href="panel.js">panel.js</a>.</p>
</body>
</html>